import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.bar .chart'));

// 指定图表的配置项和数据
const option = {
  color: ['tomato'],
  /* 类似于鼠标悬停显示的提示信息数据 */
  tooltip: {
    /* 触发方式 */
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['上海', '湖南', '广东', '北京', '浙江', '台湾'],
    axisLabel: {
      color: 'rgba(255,255,255,.6)',
      fontSize: '12'
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: 'rgba(255,255,255,.6)',
      fontSize: '12'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)'
      }
    }
  },
  grid: {
    left: '12%',
    top: '12%',
    right: '0',
    bottom: '10%'
  },
  series: [
    {
      type: 'bar',
      barWidth: '40%',
      data: [1931, 1044, 2304, 1057, 1327, 1062],
      itemStyle: {
        barBorderRadius: 2
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 自适应
window.addEventListener('resize', function () {
  myChart.resize();
});
